<template>
  <div id="app">
    <div class="login">
      <!-- logo -->
      <div class="login_img">
        <!-- <img src="../assets/logo.png" alt="" /> -->
        <img
          src="https://th.bing.com/th/id/Rfd4cbc11cb61ce9db77b10d85b9f3b79?rik=9BUj%2fhRtQ3E0Yw&riu=http%3a%2f%2fimg.crcz.com%2fallimg%2f202003%2f11%2f1583920931993044.jpg&ehk=h4ps9JtuVBUKc4hmbXsWDQwd5EbTCnJfVyZ875iSoLM%3d&risl=&pid=ImgRaw"
          alt=""
        />
      </div>
      <!-- form -->
      <div class="login_form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          ref="formRef"
        >
          <!-- 用户名 -->
          <!-- <el-form-item prop="name"> -->
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user-solid"
              placeholder="请输入账号"
              v-model="ruleForm.username"
            >
            </el-input>
          </el-form-item>
          <!-- 密码 -->

          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              v-model="ruleForm.password"
              show-password
            >
            </el-input>
          </el-form-item>

          <!-- 按钮 -->
          <el-form-item style="margin-left: 30px">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import http from '@/util/http.js'

export default {
  data () {
    return {
      ruleForm: {
        username: 'admin',
        password: '123456'
      },
      //   表单验证规则
      rules: {
        username: [
          // 检测账号是否合格 必填项 当失去焦点的时候进行判断
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 最少为3位最大为10
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        // 检测密码是否合格

        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 10,
            message: '长度在 6 到 10 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      //   console.log(val);
      //   通过表单预验证看看是否验证成功 在表单中绑定ref 根据文档通过 validate回调函数进行验证
      //   console.log(this.$refs.formRef);
      this.$refs.formRef.validate((val) => {
        //   如果验证成功返回true 否则false
        // console.log(val);
        if (val) {
          //   axios.post("login", this.ruleForm)
          http({
            method: 'post', // 什么方式请求
            url: 'login', // 请求路径
            params: this.ruleForm // 传递的参数
          }).then((res) => {
            console.log(res)
            if (res.data.meta.status === 200) {
              //   console.log("成功");
              this.$message.success('登录成功')
              //   存token 把token存到内存中 然后跳转到主页
              window.sessionStorage.setItem('token', res.data.data.token)
              this.$router.push('/home')
            } else {
              this.$message.error('登录失败')
            }
          })
        } else {
          // 不为真就return
        }
      })
    },
    // 重值
    resetForm () {
      this.ruleForm.username = ''
      this.ruleForm.password = ''
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  height: 100%;
  background: rgba(9, 10, 17, 0.5);
  .login {
    width: 430px;
    height: 300px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.login_img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 15px;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #eee;
    border: 1px solid #ddd;
  }
}
.login_form {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}
</style>
